<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<!-- JacaScript：核心语法+DOM(针对页面操作+BOM(针对浏览器)
		     学习主体：针对页面操作比较多 ---DOM操作
			 JQuery操作DOM   理解：JQ框架改变页面内容效果
			 js基础就可以直接学习，了解函数使用
			 基础函数-----事件源之后出现，事件源语法糖中
			 html()     作用：增加一个元素，覆盖原有html
			 val（）    作用：针对input元素，实现修改文本框内容
		     text()     作用：生成文本内容
		-->
		<script src="js/jquery-1.11.1.js""></script>
		<style>
			div{
				width: 200px;
				height: 200px;
				background-color: skyblue;
			}
			
		</style>
	</head>
	<body>
		<!-- 实现鼠标点击按钮，然后，改变下面产生一行文本 -->
		<button class="b">按钮</button>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil sapiente eius sequi illo atque voluptatum ducimus deleniti amet dicta! Cum incidunt ut fugiat earum excepturi. Repellendus tenetur officiis consequatur sit.</p>
		
		<div></div>
		<h3>东边日出西边雨，道是无晴却有晴。</h3>
		
		<button id="a">按钮1</button>
		<input type="text" />
		<script>
			$(".b").click(function(){
				/* JQ操作DOM---html函数使用 */
				$("p").html("<h1>JQ操作dom-html函数使用</h1>");
			});
			/* 练习：div 200*200  背景颜色自定  鼠标划过之后，下面内容修改
			 ：<h3></h3>提示，修改为自定颜色
			 */
			$("div").mouseenter(function(){
				$("h3").html("哈哈哈");
			});
			$('#a').click(function(){
				$("input[type='text']").val("每当想起你时");
			});
			/* 利用JQ操作DOM（页面效果）     1.元素内容操作（三个函数）
			                                  val()
											  html()
											  text()
			                                2.元素属性操作（四个函数）
											attr()
											removeattr()
											prop()
											removeprop()
											3.样式类名操作（4个函数）
											addclass()
											removeclass()
											togglessclass()
											hascalss()
											4.元素样式操作（5个函数）
											css()
											width()
											height()
											outerWidth()
											outerHeight()
											语法：css("css属性值", "css属性值")
											      $().attr.addclass
											5.插入和删除操作（7个函数）
											append()
											perpend()
											after()
											before()
											remove()
											empty()
											replacewith()
											6.元素遍历操作（6个）
											 
											7.JQ动画操作（7个）
											
			                                            */
		</script>
	</body>
</html>